<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0px; margin: 0px;
			}
			ul,ol{
				list-style: none;
			}
			a{
				text-decoration: none;;
			}
			.jd{
				width: 790px;
				height: 340px;
				position: relative;
				border: 1px solid red;
				margin:0 auto;
			}
			.jd ul li{
				position: absolute;
				left:0px;top:0px;
				opacity: 0;
				transition: all .5s;
			}
			.jd li img{
				width: 790px;
				height: 340px;
				display: block;
			}
			#left,#right{
				position: absolute;
				font-size:20px;
				width: 30px;height:60px;
				text-align: center;
				line-height: 60px;
				top:50%;
				margin-top:-30px;
				background: rgba(0,0,0,.3);
				color:#fff;
				display: none;
			}
			
			#left:hover,#right:hover{
				background: rgba(0,0,0,.6);
			}
			
			#left{
				left:0;
			}
			#right{
				right:0;
			}
			.jd ol{
				width: 180px;
				height: 12px;
				position: absolute;
				left:50%;
				margin-left:-91px;
				bottom:20px;
				background: rgba(0,0,0,0.2);
				border-radius: 10px;
				padding: 4px 8px;
			}
			.jd ol li{
				float: left;
				width:12px;
				height:12px;
				background: #fff;
				border-radius: 50%;
				margin:0 5px;
				text-indent:-99999px;
			}
			.jd ol li.active{
				background: red;
			}
		</style>
	</head>
	<body>
		<div class="jd">
			<ul>
				<li style="opacity: 1;"><img src="https://img13.360buyimg.com/da/jfs/t6082/203/6664294051/215517/327addf9/5975963dN3cf75702.jpg" alt="" /></li>
				<li><img src="https://img1.360buyimg.com/da/jfs/t6838/58/1188598350/101456/93ca512d/597e7d28N65750c3d.jpg" alt="" /></li>
				<li><img src="https://img12.360buyimg.com/da/jfs/t5614/73/8258277091/129172/cd6b7ea5/59793d03N8173f093.jpg" alt="" /></li>
				<li><img src="https://img11.360buyimg.com/da/jfs/t5974/7/7659601095/96078/ebcc6ea6/597fd5c0N8d058ee1.jpg" alt="" /></li>
				<li><img src="https://img12.360buyimg.com/da/jfs/t5839/154/8380421091/51117/6f3d50fb/5979ad9dN277885bf.jpg" alt="" /></li>
				<li><img src="https://img20.360buyimg.com/da/jfs/t5797/342/6911752397/143313/c4e3730e/59814aa5N8923f6ca.jpg" alt="" /></li>
				<li><img src="https://img20.360buyimg.com/da/jfs/t6982/302/1164609728/108948/2dcb5835/597ea143N19d4437d.jpg" alt="" /></li>
				<li><img src="https://img11.360buyimg.com/babel/jfs/t6886/165/1330183705/71170/e069d1e5/59802506N0c042758.jpg" alt="" /></li>
			</ul>
			<ol>
				<li class="active" title="0">1</li>
				<li title="1">1</li>
				<li title="2">1</li>
				<li title="3">1</li>
				<li title="4">1</li>
				<li title="5">1</li>
				<li title="6">1</li>
				<li title="7">1</li>
			</ol>
			<div id="te">	
		<a href="javascript:;" id="left">&lt;</a>
		<a href="javascript:;" id="right">&gt;</a></div>
		</div>
		</div>
		<script type="text/javascript">
			var oJd=document.getElementsByTagName('div')[0];//获取整个盒子
			var imgLi=document.getElementsByTagName('ul')[0].getElementsByTagName('li');//8张图
			var btnLi=document.getElementsByTagName('ol')[0].getElementsByTagName('li');//8个按钮
			var oRL=document.getElementById('te');
			var btnLeft=document.getElementById('left');
			var btnRight=document.getElementById('right');
			var num=0;
			for(var i=0;i<btnLi.length;i++){
				btnLi[i].onmouseover=function(){
					num=this.title;//当前鼠标经过那个按钮的索引。
					tabswitch();
				}
			}
			//图片和按钮切换函数,num带动图片进行切换
			function tabswitch(){
				for(var i=0;i<btnLi.length;i++){
					imgLi[i].style.opacity=0;//让所有的图片消失
					btnLi[i].className='';//取消所有按钮的类名
				}
				btnLi[num].className='active';//鼠标划过那个按钮，那个按钮添加类，this：当期你操作的元素对象。
				//alert(this.title)//当前点击的按钮的索引
				imgLi[num].style.opacity=1;
				//总结：按钮和图片是一一匹配，获取按钮的索引当我图片切换的索引。（给按钮加属性，属性值必须和按钮或者图片的索引一致的）
			}
			//鼠标经过大盒子显示左右按钮，移出隐藏按钮
			oJd.onmouseover=function(){
				btnLeft.style.display='block';
				btnRight.style.display='block';
			}
			
			oJd.onmouseout=function(){
				btnLeft.style.display='none';
				btnRight.style.display='none';
			}
			btnRight.onclick=function(){//num改变就是轮播发生改变。
				if(num<7){//不让索引溢出。
					num++;
				}else{
					num=0;
				}
				tabswitch();
			}
			
			btnLeft.onclick=function(){//num改变就是轮播发生改变。
				if(num>0){//不让索引溢出。
					num--;
				}else{
					num=7;
				}
				tabswitch();
			}
			
			var	tims=setInterval(function(){
				btnRight.onclick();
			},2000);
			oRL.onmouseover=function(){
			clearInterval(tims)	
			oRL.onmouseout=function(){
		    document.location.reload(true)
		    oRL.onmouseover=null;
		
		}
		}
			
//			var tims=setInterval(function(){
//			oR.onclick()//添加点击事件
//		},1000)
		</script>
	</body>
</html>

